<template lang="pug">
div.password-forgot
  div.login-box
    div.row.logo-wrapper
      img.logo(src='../../assets/logo_mono.svg')
      div.pull-right(style='font-size: 16px')
        span 已有账号？
        router-link(to='/login') 登录
    //- div.row.step-wrapper
      div.step
        span.line
        Steps(:current='current')
          Step(title="1.填写手机号码")
          Step(title="2.完善登录信息")
          Step(title="3.注册成功")
    Card.login-card(shadow)
      Alert.login-errors(type='error', v-show='errMsg')
        p {{ errMsg }}
      div.form-wrapper
        Form(ref='form', :model='formData', :label-width="100", :rules='rules' action='javascript:;')
          FormItem(prop='phone', label='手机号码', required, v-if='current == 0')
            Input(type='text', v-model='formData.phone', name='phone', autocomplete='on')
              span.phone-prefix(slot='prepend') + 86
          FormItem(prop='code', label='验证码' class="register-input-left" v-if='current == 0')
            Input(type='text', v-model='formData.code', name='code')
              //- Icon(style='width: 16px', type='ios-locked-outline', slot='prepend')
              CountDownButton(
                class='count-down-button'
                slot='append'
                :countDown=60
                :ready-label='countDownLabel'
                counting-label='重新获取短信 (%count)'
                :before-click='requestSms'
                @count-down-end='onCountDownEnd')
            p(v-show='showSmsHelp', style='padding-top: 6px') 验证码发送成功，60秒内未收到请重新获取
            p(v-show='showSmsError') 验证码发送失败，请重试
          //- div(v-if='current === 1')
            FormItem(prop='mail', label='邮箱')
              Input(type='text', v-model='formData.mail', name='email', autocomplete='on')
            FormItem(prop='app', label='APP名称')
              Input(type='text', v-model='formData.app', name='app', autocomplete='on')
            FormItem(prop='pass', label='密码')
              Input(type='password', v-model='formData.pass', name='pass')
            FormItem(prop='confirmPass', label='确认密码')
              Input(type='password', v-model='formData.confirmPass', name='comfirmpass')
          //- div.success-icon( v-show='current == 2')
            span.text 注册成功
            div.icon-inner
              span.icon
          //- div.next-step-wrapper
            Button(type='primary', @click='next', :loading='processing' v-show='this.current < 2') 下一步
          //- span.time(v-show='this.current == 2') {{ time }} 秒后进入管理中心
          FormItem
            Button(type='primary', @click='next', :loading='processing') 下一步

</template>

<script>
import CountDownButton from '@/components/CountDownButton'
import Api from '@/apis/app'
import userApi from '@/apis/user'

export default {
  components: {
    CountDownButton
  },
  data () {
    return {
      current: 0,
      errMsg: null,
      processing: false,
      countDownLabel: '发送短信验证码',
      showSmsHelp: false,
      showSmsError: false,
      codeValidated: false,
      formData: {
        phone: '',
        code: ''
      },
      rules: {
        phone: [
          // { type: 'number', required: true, message: '请填写手机号码' },
          {
            message: '请输入有效手机号码',
            trigger: 'blur',
            validator (rule, value, next) {
              if (/^1\d{10,10}$/.test(value)) {
                next()
              } else {
                next(rule.message)
              }
            }
          },
          {
            message: '该手机未注册',
            trigger: 'blur',
            validator (rule, value, next) {
              userApi.search(value).then((data) => {
                const idx = data.findIndex(item => item.name === value)
                idx > -1 ? next() : next(rule.message)
              })
            }
          }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'submit' },
          {
            message: '验证码错误',
            trigger: 'submit',
            validator: (rule, value, next) => {
              Api.validateCode({
                name: this.formData.phone,
                code: this.formData.code
              }).then((data) => {
                data.errCode ? next(rule.message) : next()
              })
            }
          }
        ]
      }
    }
  },
  methods: {
    async requestSms () {
      let valid = await new Promise(resolve => {
        this.$refs.form.validateField('phone', (err) => {
          resolve(err ? 0 : 1)
        })
      })

      if (!valid) return false

      try {
        this.showSmsError = false
        // this.freeze = true
        await Api.requestCodeSms(this.formData.phone)
        this.showSmsHelp = true
      } catch (e) {
        // this.countDownLabel
        this.showSmsError = true
        // this.freeze = false
        return false
      }
    },
    onCountDownEnd () {
      this.countDownLabel = '重新获取短信验证码'
    },
    next () {
      this.processing = true
      this.$refs.form.validate(valid => {
        if (valid) {
          userApi.smsLogin(this.formData).then((data) => {
            if (data.errCode) {
              this.errMsg = data.errMsg
            } else {
              window.location.href = '/password/reset'
            }
            this.processing = false
          })
        } else {
          this.processing = false
        }
      })
    }
  }
}
</script>

<style lang="less">

.password-forgot {
  width: 100%;
  height: 100%;
  background-color: #e6e6e6;
  position: relative;
  // }
  .login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    h1, h2 {
      margin-bottom: 8px;
    }
  }
  .login-card {
    width: 800px;
  }
  .logo-wrapper {
    padding: 20px 20px;
    background-color: #fff;
    border-bottom: 1px solid #f4f4f4;

    .logo {
      height: 35px;
      width: auto;
    }

  }
}

  .form-wrapper {
    width: 440px;
    margin: 70px auto;
    .ivu-input-group-prepend {
      background-color: #fff;
    }
    .ivu-form-item-label {
      font-size: 14px;
      padding-top: 11px;
      padding-bottom: 11px;
    }
    .phone-prefix {
      display: inline-block;
      width: 60px;
      background-color: #fff;
    }
    input {
      height: 36px;
    }
    .register-input-left {
      border-spacing: 5px 0;
      .ivu-input {
        border-radius: 4px;
        position: relative;
        right: 5px;
      }
      .ivu-input-group-append {
        background-color: transparent;
        border: none;
        border-radius: 4px;
        border-bottom-left-radius: 4px!important;
        border-top-left-radius: 4px!important;
        position: relative;
        left: 5px;
        .count-down-button {
          color: #fff;
        }
        .ivu-btn-ghost {
          color: #fff;
          background-color: #377dff;
        }
        .ivu-btn-ghost[disabled] {
          color: #898a8c;
          background-color: #f7f7f7;
          border-color: #dddee1;
        }
      }
      &.ivu-form-item-error {
        .ivu-input-group-append {
          border: none;
        }
      }
    }
    .time {
      display: block;
      margin: 0 auto;
      text-align: center;
      font-weight: 600;
      opacity: 0.8;
    }
  }
  .login-errors {
    margin-bottom: 24px;
  }
</style>
